<template>
  <div class="dt-talk-input">
    <div class="dt-chat-content-int" :class="{ 'is-draging': isDraging }">
      <i class="dt-el-icon dt-icon-emoji" @click.stop="showEmoji" title="发送表情"><img src="/skb/img/emoji.svg" alt="" /></i>
      <i class="dt-el-icon el-icon-folder-opened" @click="showFileInput('file')" title="发送文件"></i>
      <i class="dt-el-icon el-icon-picture-outline" @click="showFileInput('img')" title="发送图片"></i>
      <i class="dt-el-icon el-icon-circle-check" @click="showReceipt" title="回执消息"></i>
      <i class="dt-el-icon el-icon-chat-line-square" @click="showChatHistory" title="聊天记录"></i>
      <div class="dt-editor-placeholder" v-if="isShowPlaceholder">按Enter键发送消息（试试直接把文件拖到此处上传！）</div>
      <div
        class="dt-editor"
        ref="editor"
        @keyup="editorKeyUp"
        @keydown="editorKeyDown"
        @dragenter="dragenter"
        @dragleave="dragleave"
        @drop.prevent="drop"
        @paste.stop.prevent="paste"
        @input="editorKeyPress"
      ></div>
      <div class="dt-chat-content-int-btn">
        <input type="file" @change="fileChage($event, 'img')" ref="fileInputimg" style="display: none" accept=".jpg,.jpeg,.png,.gif" multiple />
        <input
          type="file"
          @change="fileChage($event, 'file')"
          ref="fileInputfile"
          style="display: none"
          accept=".txt,.pdf,.doc,.docx,.xls,.xlsx,.ppt,.pptx,.rar,.zip"
        />
        <el-popover placement="top" v-model="isShowSendPopover" popper-class="dt-send-el-popover" trigger="manual">
          <p>不能发送空白信息</p>
          <el-button slot="reference" type="primary" icon="el-icon-s-promotion" @click="getMessText" size="medium" :loading="lock.sendMess"
            >发送</el-button
          >
        </el-popover>
      </div>
      <PublicEmojiList @sendEmoji="sendEmoji" v-if="isShowEmoji" />
    </div>
    <el-dialog
      title="发送文件"
      class="dialogBox"
      top="30vh"
      :visible.sync="dialogSendFile"
      :modal-append-to-body="false"
      width="400px"
      :before-close="sendClose"
    >
      <div class="dt-dialog-list">
        <div class="dt-dialog-box" v-for="(item, index) in currFile.files" :key="index">
          <img :src="currFile.icon" alt="" />
          <div class="dt-dialog-info">
            <span :title="item.name">{{ item.name }}</span>
            <em>{{ currFile.size[index] }}</em>
          </div>
        </div>
      </div>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="sureSendFile">确 定</el-button><el-button @click="quitSendFile">取 消</el-button>
      </div>
    </el-dialog>
    <el-dialog
      title="回执消息"
      class="receiptBox"
      top="30vh"
      :visible.sync="receiptShow"
      :modal-append-to-body="false"
      width="680px"
      :before-close="receiptClose"
      :close-on-click-modal="false"
    >
      <div class="dt-receipt-content">
        <el-form :model="receiptForm" :rules="receiptRules" ref="receiptForm" label-width="100px" label-position="left" size="small">
          <el-form-item label="标题" prop="title">
            <el-input placeholder="请输入标题" v-model="receiptForm.title" maxlength="40" show-word-limit size="medium"> </el-input>
          </el-form-item>
          <el-form-item label="参与人" prop="joinUserIds">
            <el-select
              v-model="receiptForm.joinUserIds"
              placeholder="请输入成员实名"
              clearable
              multiple
              size="medium"
              popper-class="dt-receipt-content-select"
              @visible-change="removeClass"
            >
              <el-input placeholder="请输入成员实名" v-model="receiptSearchMember" size="mini" @input="receiptSearchMemberChange">
                <i slot="suffix" class="el-input__icon el-icon-search" @click="fuzzySearch"></i>
              </el-input>
              <span class="dt-receipt-all" @click="selectReceiptAll" v-if="receiptMemberList.length">所有人</span>
              <el-option v-for="item in receiptMemberList" :label="item.userName" :value="item.userId + ''" :key="item.userId"></el-option>
              <div class="dt-receipt-content-empty" slot="empty">
                <el-input placeholder="请输入成员实名" v-model="receiptSearchMember" size="mini">
                  <i slot="suffix" class="el-input__icon el-icon-search" @click="fuzzySearch"></i>
                </el-input>
                <p>无匹配数据</p>
              </div>
            </el-select>
          </el-form-item>
          <el-form-item label="截止时间">
            <span class="receiptBox-switch-left" @click="switchCli(!receiptForm.isEndTime)" v-show="receiptForm.isEndTime">开</span>
            <el-switch v-model="receiptForm.isEndTime" class="receiptBox-switch-mediu" @change="switchCli"> </el-switch>
            <span class="receiptBox-switch-right" @click="switchCli(!receiptForm.isEndTime)" v-show="!receiptForm.isEndTime">关</span>
            <el-date-picker
              v-show="receiptForm.isEndTime"
              class="receiptBox-switch-date"
              v-model="receiptForm.endTime"
              type="datetime"
              placeholder="选择日期时间"
              size="medium"
              value-format="yyyy-MM-dd HH:mm"
              format="yyyy-MM-dd HH:mm"
              :picker-options="pickerOptions"
              @change="changeDate"
            >
            </el-date-picker>
          </el-form-item>
          <el-form-item label="描述">
            <el-input type="textarea" placeholder="" v-model="receiptForm.description" maxlength="500" show-word-limit :rows="3"> </el-input>
          </el-form-item>
          <el-form-item label="附件">
            <el-upload
              action="#"
              :http-request="httpRequest"
              :show-file-list="false"
              :on-change="handleChange"
              :file-list="this.receiptForm.fileList"
              :limit="5"
              :before-upload="beforeAvatarUpload"
              :on-exceed="handleExceed"
            >
              <el-button slot="trigger" size="small" icon="el-icon-upload2">选取文件</el-button>
              <div slot="tip" class="el-upload__tip">单个文件小于20M，最多可以上传5个附件</div>
            </el-upload>
            <div v-for="item in this.receiptForm.fileList" :key="item.uid" style="margin-top: 4px; line-height: 28px">
              <div class="dt-content-approval-achievement">
                <span :title="item.name" class="dt-content-approval-filename"><i class="el-icon-document"></i>{{ item.name }}</span>
                <span class="dt-content-approval-btn">
                  <el-button type="text" @click="handleRemove(item)">删除</el-button>
                </span>
              </div>
              <div>
                <el-progress v-if="item.percentage !== 100" :percentage="item.percentage" :stroke-width="2"></el-progress>
              </div>
            </div>
          </el-form-item>
        </el-form>
      </div>
      <div slot="footer" class="dt-receipt-footer">
        <el-button type="primary" @click="sendReceipt('receiptForm')" size="small">创建回执消息</el-button>
        <el-button @click="receiptClose" size="small">取 消</el-button>
      </div>
    </el-dialog>
    <!-- 查找聊天记录 -->
    <el-dialog
      class="dialogSearchBox"
      top="18vh"
      :visible.sync="dialogChatHistory"
      :modal-append-to-body="false"
      :close-on-click-modal="false"
      :close-on-press-escape="false"
      width="800px"
      @close="historyClose"
    >
      <div slot="title" class="dialog-histiry-title" :class="selectFilter.key ? 'tab-' + selectFilter.key : ''">
        <p>查找聊天记录</p>
        <el-input placeholder="请输入搜索内容" v-model.trim="searchKeywords" maxlength="40" size="medium" @input="debouncedSearch">
          <!-- <i slot="prefix" class="el-input__icon el-icon-search"></i> -->
          <el-tag v-if="isSearchSubGroup" slot="prefix" closable type="info" @close="searchSubGroup"> 下级群记录 </el-tag>
          <el-tag v-else-if="selectFilter.key" slot="prefix" closable type="info" @close="clearSearch">{{ selectFilter.label }}</el-tag>
        </el-input>
        <div v-show="selectFilter.key == 1" class="select-user">
          <el-tag closable type="info" @close="delUser(info)" v-for="(info, j) in cutUsers" :key="'name' + j">{{ info.userName }}</el-tag>
          <span v-if="cutIndex !== -1" style="padding-top: 10px">...</span>
        </div>
        <div class="history-filter">
          <span class="dialog-histiry-btn" v-for="(item, index) in historyFilter" :key="'filter' + index" @click="searchByfilter(item)">{{
            item.label
          }}</span>
          <span v-if="groupType == 1 && groupUid == uid && totalGroup !== 1 && !isSearchSubGroup" class="dialog-histiry-btn" @click="searchSubGroup">
            下级群记录
          </span>
        </div>
      </div>
      <div class="user-list" v-if="isUserListShow">
        <div class="user-list-title">查看指定用户</div>
        <div class="user-list-search">
          <el-input placeholder="搜索" v-model.trim="userListKeywords" size="mini">
            <el-button slot="append" icon="el-icon-search" @click="userListSearch"></el-button>
          </el-input>
        </div>
        <div class="user-list-searchList no-data" v-if="!searchUserList.length">暂无数据</div>
        <div class="user-list-searchList" v-else>
          <div class="user-list-searchItem clearfix" v-for="item in searchUserList" :key="item.userId">
            <el-checkbox v-model="item.checked" class="user-list-searchItem-check"> </el-checkbox>
            <el-image :src="$tools.getStsFileUrl(secretUid, item.headImg)" @load="$tools.loadImgCenter($event, 26)">
              <div slot="placeholder" class="image-slot">
                <i class="el-icon-loading"></i>
              </div>
            </el-image>
            <div class="user-list-username">
              <span>{{ item.userName }}</span>
              <span>{{ '（UID' + item.userId + '）' }}</span>
              <span>{{ item.safePhone | filterPhone }}</span>
            </div>
          </div>
        </div>
        <div class="user-list-footer">
          <el-button type="primary" @click="debouncedSearchUsersHistory" size="medium">确定({{ selectUsers.length }})</el-button>
          <el-button @click="cancelSearch" size="medium">取消</el-button>
        </div>
      </div>
      <div class="infinite-list-wrapper">
        <PublicEmpty v-show="(totalRecord == 0 && !isSearchSubGroup) || (subGroupRecordList.length == 0 && isSearchSubGroup)" :ishowImage="true" />
        <div v-if="isSearchSubGroup && subGroupRecordList.length != 0" class="dt-record-list-left">
          <ul class="dt-record-list-sub-group">
            <li class="dt-record-list-sub-group-item" v-for="item in subGroupRecordList" :key="item.groupId" @click="searchSubGroupItem(item)">
              <img src="/skb/img/chat-mess.png" alt="图像的描述" />
              <div class="dt-record-list-sub-group-item-tip">
                <p>{{ item.groupName }}</p>
                <p>{{ item.recordCount }}条相关聊天记录</p>
              </div>
            </li>
          </ul>
        </div>
        <div class="dt-record-list-right" v-if="(totalRecord > 0 && !isSearchSubGroup) || (isSearchSubGroup && subGroupRecordList.length != 0)">
          <div class="dt-record-list-right-title" v-if="totalRecord > 0 && isSearchSubGroup">
            {{ recordCount }}条与“{{ searchKeywords }}”相关的聊天记录
          </div>
          <div class="dt-scroll-container" ref="scrollHistory">
            <ul
              v-show="totalRecord > 0"
              class="dt-record-list"
              v-infinite-scroll="chatHistoryLoad"
              :infinite-scroll-disabled="chatHistoryDisabled"
              v-loading="totalRecord > 0 && searchRecordList.length == 0"
              element-loading-text="拼命加载中"
              element-loading-spinner="el-icon-loading"
            >
              <li
                v-for="item in searchRecordList"
                :class="['dt-list-item', { 'dt-list-item-bgc': !!item.privateUserId && selectFilter.key !== 6 }]"
                :key="item.recordId"
              >
                <div class="dt-record-list-headimg por" v-if="selectFilter.key !== 6">
                  <el-image :src="$tools.getStsFileUrl(secretUid, item.headImg)" @load="$tools.loadImgCenter($event, 26)">
                    <div slot="placeholder" class="image-slot">
                      <i class="el-icon-loading"></i>
                    </div>
                  </el-image>
                  <i v-if="item.toWho" class="dt-history-list-imgat"></i>
                  <i v-if="item.privateUserId" class="dt-history-list-imgsl"></i>
                </div>
                <div class="dt-record-list-content">
                  <div @click="anchorPoint(item)">
                    <div class="dt-user-name" v-if="selectFilter.key !== 6">
                      <em
                        v-if="item.privateUserId"
                        :class="[{ 'dt-chat-content-words-sl': true }, { 'dt-chat-content-words-black': !!searchKeywords }]"
                        >{{ item.userName + ' 私聊 ' + item.privateUserName }}</em
                      >
                      <em v-else>{{ item.userName }}</em>
                      <span>{{ item.createTime }}</span>
                    </div>
                    <!-- 1、系统消息 -->
                    <div v-if="item.messageType == 1" class="dt-words-box">
                      <span v-for="(items, index) in item.message.message" :key="'history' + index + items.content + generateTimestamp()">
                        <em
                          :class="[
                            { 'dt-chat-content-words-at': item.toWho != null },
                            { 'dt-chat-content-words-sl': !!item.privateUserId },
                            { 'dt-chat-content-words-bold': items.bold == 'true' }
                          ]"
                          v-html="highlighted(items.content)"
                        ></em>
                      </span>
                    </div>
                    <!-- 2、文本消息 -->
                    <div v-if="item.messageType == 2" class="dt-words-box">
                      <span v-for="(items, index) in item.message.message" :key="'history' + index + items.content + generateTimestamp()">
                        <em
                          :class="[
                            { 'dt-chat-content-words-at': item.toWho != null },
                            { 'dt-chat-content-words-sl': !!item.privateUserId },
                            { 'dt-chat-content-words-black': !!searchKeywords }
                          ]"
                          v-html="highlighted(items.content)"
                        ></em
                        ><br v-if="items.wrap == 'true'" />
                      </span>
                      <span v-if="item.messageTip" class="dt-report-tip"><i class="el-icon-warning-outline"></i>{{ item.messageTip }}</span>
                    </div>
                    <!-- 3、图片消息 -->
                    <div v-if="item.messageType == 3" class="dt-words-box" @click.stop="() => {}">
                      <div :class="[{ 'dt-chat-content-words-at': item.toWho != null }, { 'dt-chat-content-words-sl': !!item.privateUserId }]">
                        {{ item.toWhoNames }}
                      </div>
                      <div class="dt-chat-content-words-box">
                        <div v-if="item.message.message.length === 1" class="dt-chat-1imgs">
                          <!-- <p class="dt-chat-content-words-receipt-tip" v-if="!!item.singleReceiptUid">{{item.toWhoNames}}</p> -->
                          <!-- <p class="dt-chat-content-words-receipt-tip" v-if="!!item.toWho">{{ item.toWhoNames }}</p> -->
                          <el-image
                            v-for="(items, index) in item.message.message"
                            :key="items.fileUrl"
                            :initial-index="index"
                            :src="$tools.getStsFileUrl(secretUid, items.fileUrl, '100h_100w_1e')"
                            :alt="items.fileName"
                            :preview-src-list="
                              (() => {
                                return item.message.message.map((items) => {
                                  return $tools.getStsFileUrl(secretUid, items.fileUrl)
                                })
                              })()
                            "
                            @load="
                              $tools.loadImgCenter($event, null, () => {
                                if (loadDirection === 'bottom') {
                                  handleScrollBottom('1')
                                }
                              })
                            "
                          >
                            <div slot="placeholder" class="image-slot">
                              <i class="el-icon-loading"></i>
                            </div>
                          </el-image>
                        </div>
                        <div v-else-if="item.message.message.length > 1" class="dt-chat-9imgs">
                          <!-- <p class="dt-chat-content-words-receipt-tip" v-if="item.singleReceiptUid">{{item.toWhoNames}}</p> -->
                          <!-- <p class="dt-chat-content-words-receipt-tip" v-if="!!item.toWho">{{ item.toWhoNames }}</p> -->
                          <el-image
                            v-for="(items, index) in item.message.message"
                            :key="items.fileUrl"
                            :initial-index="index"
                            :src="$tools.getStsFileUrl(secretUid, items.fileUrl, '100h_100w_1e')"
                            :alt="items.fileName"
                            :preview-src-list="
                              (() => {
                                return item.message.message.map((items) => {
                                  return $tools.getStsFileUrl(secretUid, items.fileUrl)
                                })
                              })()
                            "
                            @load="
                              $tools.loadImgCenter($event, 100, () => {
                                if (loadDirection === 'bottom') {
                                  handleScrollBottom('2')
                                }
                              })
                            "
                          >
                            <div slot="placeholder" class="image-slot">
                              <i class="el-icon-loading"></i>
                            </div>
                          </el-image>
                        </div>
                      </div>
                      <!-- <span v-for="(items, index) in item.message.message" :key="'history' + index + items.fileUrl">
                        <em :class="['mr4', { 'dt-chat-content-words-at': item.toWho != null }, { 'dt-chat-content-words-sl': !!item.privateUserId }]"
                          >[图片]</em
                        >
                      </span> -->

                      <!-- <em v-if="item.singleReceiptUid" :class="[{ 'dt-chat-content-words-at': item.toWho}]">{{item.toWhoNames}}【回执消息】</em> -->
                      <span v-if="item.messageTip" class="dt-report-tip"><i class="el-icon-warning-outline"></i>{{ item.messageTip }}</span>
                    </div>
                    <!-- 4、文件消息 -->
                    <div v-if="item.messageType == 4" class="dt-words-box">
                      <!-- <span v-for="(items, index) in item.message.message" :key="'history' + index + items.fileUrl">
                        <a
                          href="javascript:void(0);"
                          :class="[
                            'dt-mess-file',
                            { 'dt-chat-content-words-at': item.toWho != null },
                            { 'dt-chat-content-words-sl': !!item.privateUserId }
                          ]"
                          >[<i class="el-icon-document"></i><em v-html="highlighted(item.message.message[0].fileName)"></em>]</a
                        >
                      </span> -->

                      <div class="file-panel" v-if="selectFilter.key == 6">
                        <div class="file-panel-box">
                          <img :src="currFilecon(item.message.message[0])" alt="" />
                          <div class="info">
                            <p class="name" v-html="highlighted(item.message.message[0].fileName)"></p>
                            <p class="sub">{{ item.userName }}</p>
                          </div>
                          <div class="right">
                            <p>{{ item.createTime }}</p>
                            <p>{{ $tools.convertUnit(item.message.message[0].fileSize) }}</p>
                          </div>
                        </div>
                      </div>
                      <div class="dt-chat-content-words-box file-box" v-else>
                        <!-- <p class="dt-chat-content-words-receipt-tip" v-if="item.singleReceiptUid">{{item.toWhoNames}}</p> -->
                        <!-- <p class="dt-chat-content-words-receipt-tip" v-if="!!item.toWho">{{ item.toWhoNames }}</p> -->
                        <div :class="[{ 'dt-chat-content-words-at': item.toWho != null }, { 'dt-chat-content-words-sl': !!item.privateUserId }]">
                          {{ item.toWhoNames }}
                        </div>
                        <div class="dt-chat-content-words-receipt-card" @click="downFile(item)">
                          <div>
                            <img :src="currFilecon(item.message.message[0])" alt="" />
                          </div>
                          <div>
                            <p class="mb4" v-html="highlighted(item.message.message[0].fileName)"></p>
                            <p class="colorb-3">{{ $tools.convertUnit(item.message.message[0].fileSize) }}</p>
                          </div>
                        </div>
                      </div>

                      <!-- <em v-if="item.singleReceiptUid" :class="[{ 'dt-chat-content-words-at': item.toWho}]">{{item.toWhoNames}}【回执消息】</em> -->
                      <span v-if="item.messageTip && selectFilter.key !== 6" class="dt-report-tip"
                        ><i class="el-icon-warning-outline"></i>{{ item.messageTip }}</span
                      >
                    </div>
                    <!--6、语音 -->
                    <div class="dt-words-box" v-if="item.messageType == 6">
                      <div class="dt-chat-content-words">
                        <div class="dt-chat-content-words-box dt-chat-content-words-box-voice">
                          <div class="voice-message" :style="{ width: voiceMessageWidth(item.message.message[0].duration) }">
                            <span class="text">[语音]</span>
                            <!-- <span class="icon paused"></span> -->
                            <span class="audio-length">{{ item.message.message[0].duration }}''</span>
                            <!-- <button @click="showText(item)">文字</button> -->
                          </div>
                          <div class="voice-text" v-if="item.message.message[0].text && item.isShowText">
                            <p>
                              {{ item.message.message[0].text }}
                            </p>
                          </div>
                        </div>
                      </div>
                    </div>
                    <!-- 7、卡片回执消息 -->
                    <div v-if="item.messageType == 7" class="dt-words-box">
                      <!-- <span v-for="(items, index) in item.message.message" :key="'history' + index + items.fileUrl">
                        <em :class="[{ 'dt-chat-content-words-at': item.toWho }]"
                          ><em v-html="highlighted(items.title)"></em>{{ item.toWhoNames }}【回执消息】</em
                        >
                      </span> -->
                      <!-- <em :class="[{ 'dt-chat-content-words-at': item.toWho}]">{{highlighted(items.title)}}{{item.toWhoNames}}【回执消息】</em> -->

                      <div class="dt-chat-content-words-card">
                        <el-card class="box-card" shadow="never">
                          <div class="dt-chat-content-words-card-title" v-html="highlighted(item.message.message[0].title)"></div>
                          <div class="dt-chat-content-words-card-dec" v-if="item.receiptEndTime">
                            截止时间：{{ item.receiptEndTime.substring(0, 16) }}
                          </div>
                          <div class="dt-chat-content-words-card-dec">
                            描述：{{ item.message.message[0].description ? item.message.message[0].description : '暂无内容' }}
                          </div>
                          <div class="dt-chat-content-words-card-dec mt8">参与人：{{ item.message.message[0].joinUserNames }}</div>
                        </el-card>
                      </div>
                      <span v-if="item.messageTip" class="dt-report-tip"><i class="el-icon-warning-outline"></i>{{ item.messageTip }}</span>
                    </div>
                  </div>
                  <!-- 评论 -->
                  <div v-if="item.disableComment == 0 && item.replyCount > 0 && selectFilter.key !== 6" class="dt-reply-info">
                    <div v-for="items in item.reply" :key="items.replyId" class="mb6" @click="anchorPoint(item)">
                      <p>
                        {{ items.userName }}:
                        <span
                          v-if="items.messageType == '3'"
                          :class="['dt-chat-content-reply-info-words', { 'dt-chat-content-reply-info-words-sl': !!item.privateUserId }]"
                        >
                          <a href="javascript:void(0)">
                            {{ items.shortMessage }}
                          </a>
                        </span>
                        <span v-else>
                          <span
                            v-for="(currentItem, index) in JSON.parse(items.message).message"
                            :key="'history' + index + currentItem.content + generateTimestamp()"
                            :class="['dt-chat-content-reply-info-words', { 'dt-chat-content-reply-info-words-sl': !!item.privateUserId }]"
                            v-html="highlighted(currentItem.content)"
                          ></span>
                        </span>
                      </p>
                      <span class="dt-time">
                        {{ items.createTime }}
                        <span v-if="items.messageTip" class="dt-report-tip"><i class="el-icon-warning-outline"></i>{{ items.messageTip }}</span>
                      </span>
                    </div>
                    <div v-if="item.isShowMoreCount" class="dt-chat-content-reply-info-review">
                      <a href="javascript:void(0)" @click="getReplyList(item)">更多</a>
                    </div>
                    <div v-if="!item.isShowMoreCount && item.replyCount > 3" class="dt-chat-content-reply-info-review">
                      <a href="javascript:void(0)" @click="foldReplyList(item)">收起</a>
                    </div>
                  </div>
                  <div class="divide-line"></div>
                </div>
              </li>
            </ul>
            <div v-if="totalRecord > 12 && searchRecordList.length > 12">
              <p class="loading" v-if="chatHistoryLoading">加载中...</p>
              <!-- <p class="loading noMore" v-else-if="chatHistoryNoMore">没有更多了</p> -->
            </div>
            <p class="loading noMore" v-show="searchRecordList.length >= totalRecord">没有更多了</p>
          </div>
        </div>
      </div>
    </el-dialog>
  </div>
</template>
<script>
// import VueTribute from 'vue-tribute'
export default {
  head() {
    return {
      link: [
        {
          //@样式
          rel: 'stylesheet',
          type: 'text/css',
          href: 'https://www.ccccdt.com/skb/css/tribute.min.css'
        }
      ],
      script: [
        {
          //天翼云
          type: 'text/javascript',
          src: 'https://www.ccccdt.com/skb/js/oos-sdk-6.0.min.js'
        },
        {
          //@js
          type: 'text/javascript',
          src: 'https://www.ccccdt.com/skb/js/tribute.min.js'
        }
      ]
    }
  },
  props: {
    groupType: Number,
    totalGroup: Number,
    groupUid: Number
  },
  // components: {
  //   VueTribute
  // },
  computed: {
    query() {
      return this.$tools.getQuery(this)
    },
    // 聊天记录start
    chatHistoryNoMore() {
      return this.searchRecordList.length >= this.totalRecord
    },
    chatHistoryDisabled() {
      return this.chatHistoryLoading || this.chatHistoryNoMore
    },
    selectUsers() {
      return this.searchUserList.filter((item) => item.checked)
    },
    cutUsers() {
      if (this.cutIndex !== -1) {
        console.log('diaoyongle ================', this.cutIndex, this.selectUsers.slice(0, this.cutIndex))
        return this.selectUsers.slice(0, this.cutIndex)
      } else return this.selectUsers
    }
    // 聊天记录end
  },
  data() {
    var joinUserIdIsEmpty = (rule, value, callback) => {
      if (value.length === 0) {
        callback(new Error('请选择参与人'))
      } else {
        callback()
      }
    }
    return {
      secretUid: this.$store.state.uid,
      uid: this.$tools.getDecrypt(this.$store.state.uid), //用户id
      isShowSendPopover: false,
      isDraging: false,
      lock: { isMoreCount: false, atUser: false, sendMess: false, report: false }, //sendImg: false, sendFile: false,
      currFile: { isImg: true, icon: '', files: [], name: [], size: [] }, //当前要发送的文件
      isShowPlaceholder: true,
      dialogSendFile: false, //发送文件弹框
      privateUserId: 0, //私聊用户id
      receiptUserId: 0, //回执用户id
      // 文件的上传列表
      fileList: [],
      // 图片的上传列表
      imgList: [],
      currFile: { isImg: true, icon: '', files: [], name: [], size: [] },
      // 回执消息弹窗
      receiptShow: false,
      // 回执消息表单
      receiptForm: {
        title: '',
        userId: this.$tools.getDecrypt(this.$store.state.uid),
        description: '',
        fileList: [],
        joinUserIds: [],
        // 是否需要截止时间endTime
        isEndTime: false,
        endTime: ''
      },
      receiptRules: {
        title: [{ required: true, message: '请输入标题', trigger: 'blur' }],
        joinUserIds: [{ required: true, validator: joinUserIdIsEmpty, trigger: 'change' }]
      },
      // 回执消息参与人列表
      receiptMemberList: [],
      // 复制回执消息参与人列表
      receiptMemberListCopy: [],
      // 搜索回执消息参与人
      receiptSearchMember: '',
      // 查看聊天记录start
      dialogChatHistory: false,
      searchRecordList: [],
      searchKeywords: '',
      searchTime: '',
      page: 1,
      totalRecord: 0,
      chatHistoryLoading: false,
      // 是否查找下级群记录
      isSearchSubGroup: false,
      // 子群聊天记录列表
      subGroupRecordList: [],
      // 多少条与关键字相关
      recordCount: 0,
      // 当前查看的子群聊天记录
      currentGroup: {},
      pickerOptions: {
        disabledDate(time) {
          // 禁用今天之前的时间
          return time.getTime() < Date.now() - 24 * 60 * 60 * 1000
        }
      },
      // 查看聊天记录end
      isShowEmoji: false,
      // 0-全部，1-查看指定用户，2-仅查看私聊，3-仅查看@消息，4-仅查看自己,5-回执卡片，6-文件，7-图片,8-任务
      selectFilter: {},
      historyFilter: [
        {
          label: '文件',
          key: 6
        },
        {
          label: '图片',
          key: 7
        },
        {
          label: '回执卡片',
          key: 5
        },
        {
          label: '查看指定用户',
          key: 1
        },
        {
          label: '仅查看私聊',
          key: 2
        },
        {
          label: '仅查看@消息',
          key: 3
        },
        {
          label: '仅查看自己',
          key: 4
        }
      ],
      curCaretPosition: 0,
      isUserListShow: false,
      userList: [], //群成员
      searchUserList: [],
      userListKeywords: '',
      cutIndex: -1,
      loadDirection: 'bottom' //初始加载方向向下,
    }
  },
  filters: {
    kbToMb(kb, precision = 2) {
      // if (isNaN(kb)) return kb // 如果输入不是数字，直接返回原始值
      // return (kb / (1024 * 1024)).toFixed(2) //toFixed(2) 保留两位小数
      if (isNaN(kb)) return kb // 如果输入不是数字，直接返回原始值
      let result = kb / (1024 * 1024) // 转换为MB
      result = parseFloat(result.toFixed(precision)) // 保留指定位数的小数
      return result < 0.01 ? 0.01 : result // 如果结果小于0.01，则返回0.01，否则返回计算结果
    },
    filterPhone(val) {
      if (val) {
        return val.substring(0, 3) + '****' + val.substring(7, 11)
      } else {
        return '--'
      }
    }
  },
  methods: {
    // 滚动到底部
    handleScrollBottom(type) {
      this.$nextTick(() => {
        let scrollElem = this.$refs.scrollHistory
        if (scrollElem) {
          // console.log(scrollElem.scrollHeight)
          // scrollElem.scrollTo({ top: scrollElem.scrollHeight, behavior: 'smooth' })
        }
      })
    },
    voiceMessageWidth(duration) {
      // 最小宽度和最大宽度
      let baseWidth = 72 // 最小宽度
      let maxWidth = 280 // 最大宽度

      // 可增加的宽度范围（最大宽度减去基础宽度）
      let widthRange = maxWidth - baseWidth

      // 假设音频最大时长为60秒，计算每秒增加的宽度
      let widthPerSecond = widthRange / 60

      // 根据音频时长计算宽度增加量
      let widthIncrease = duration * widthPerSecond

      // 计算最终宽度，并确保它在最小和最大宽度之间
      let calculatedWidth = baseWidth + widthIncrease
      // console.log(Math.min(Math.max(calculatedWidth, baseWidth), maxWidth))
      return `${Math.min(Math.max(calculatedWidth, baseWidth), maxWidth)}px`
    },
    cancelSearch() {
      this.searchUserList = this.searchUserList.map((item) => {
        return {
          ...item,
          checked: false
        }
      })
      this.isUserListShow = false
    },
    calculatedTagWidth() {
      this.cutIndex = -1
      this.$nextTick(() => {
        let tagDoms = document.querySelectorAll('.dialogSearchBox .select-user .el-tag')
        let tagWidth = 0
        for (let index = 0; index < tagDoms.length; index++) {
          const element = tagDoms[index]
          tagWidth += element.clientWidth
          tagWidth += 4
          if (tagWidth > 360) {
            this.cutIndex = index
            break
          }
        }
      })
    },
    delUser(info) {
      this.searchUserList = this.searchUserList.map((item) => {
        if (info.userId == item.userId)
          return {
            ...item,
            checked: false
          }
        else return item
      })
      if (this.selectUsers.length == 0) {
        this.clearSearch()
        return
      }
      this.calculatedTagWidth()
      this.totalRecord = 0
      this.searchHistory()
    },
    searchUsersHistory() {
      if (this.selectUsers.length == 0) {
        this.$message.warning(`请先选择指定用户`)
        return
      }

      this.isSearchSubGroup = false
      this.selectFilter = {
        label: '查看指定用户',
        key: 1
      }
      this.calculatedTagWidth()
      console.log('查看指定用户=========', this.selectUsers)
      this.searchHistory()
      this.isUserListShow = false
    },
    userListSearch() {
      let list = JSON.parse(JSON.stringify(this.userList))
      this.searchUserList = list.filter((item) => item.userName.indexOf(this.userListKeywords) !== -1)
    },
    handleClose() {
      this.handleClose = false
    },
    currFilecon(file) {
      return '/skb/img/chat/ic_' + file.fileSuffix + '.png'
    },
    showEmoji() {
      this.isShowEmoji = true
      this.curCaretPosition = this.getCaretPosition(this.$refs.editor)
    },
    // 发送emoji
    sendEmoji(emoji) {
      this.isShowPlaceholder = false
      let html = this.$refs.editor.innerHTML
      this.$refs.editor.innerHTML = html + emoji

      var range = window.getSelection() //创建range
      range.selectAllChildren($('.dt-editor')[0]) //range 选择editor下所有子内容
      range.collapseToEnd() //光标移至最后
      // var start = this.$refs.editor.innerHTML.substring(0, this.curCaretlenition)
      // var end = this.$refs.editor.innerHTML.substring(this.curCaretPosition)
      // console.log('getCaretPosition=========', this.curCaretPosition, start, end)
      // this.$refs.editor.innerHTML = start + emoji + end
      // // 将光标移动到插入表情后的位置
      // this.setCaretPosition(this.$refs.editor, start.length + emoji.length)
    },
    setCaretPosition(input, pos) {
      if (input.setSelectionRange) {
        input.focus()
        input.setSelectionRange(pos, pos)
      } else if (input.createTextRange) {
        var range = input.createTextRange()
        range.collapse(true)
        range.moveEnd('character', pos)
        range.moveStart('character', pos)
        range.select()
      }
    },
    getCaretPosition(input) {
      console.log('getCaretPositiongetCaretPosition======', this.$refs.editor)
      if (input.selectionStart !== undefined) {
        return input.selectionStart
      } else if (document.selection) {
        input.focus()
        var sel = document.selection.createRange()
        var selLen = document.selection.createRange().text.length
        sel.moveStart('character', -input.innerHTML.length)
        return sel.text.length - selLen
      }
    },
    /**************************input***********************************/
    //触发fileinput
    showFileInput(type, item, index) {
      if (this.lock.sendMess) {
        this.$message({
          message: '文件发送中，请稍后',
          type: 'warning',
          duration: 2000,
          onClose: () => {}
        })
        return
      }
      if (item) {
        this.recordItem = item
        this.replyIndex = index
      }
      this.$refs['fileInput' + type].click()
    },
    //fileinput触发change
    fileChage(e, type) {
      // this.testFile(fileList, type)
      var files = e.target.files
      this.testFile(files, type)
    },
    // 图片添加水印
    watermarkImage(file, dataURLtoFile) {
      var currenDate = this.$tools.getDateFormatString('ymdhms')
      return new Promise((resolve, reject) => {
        const reader = new FileReader()
        reader.onload = function (e) {
          const img = new Image()
          img.onload = function () {
            const canvas = document.createElement('canvas')
            const ctx = canvas.getContext('2d')
            // 确保画布尺寸与图片尺寸一致
            canvas.width = img.width
            canvas.height = img.height
            // 绘制原始图片
            ctx.drawImage(img, 0, 0, img.width, img.height, 0, 0, canvas.width, canvas.height)
            // 根据图片尺寸调整水印文字大小和位置
            var fontSize = Math.round(canvas.width / 30) // 字体大小根据图片宽度调整
            var watermarkX = canvas.width * 0.98 // 文字距离右侧边缘2%
            var watermarkY = canvas.height * 0.98 // 文字距离底部边缘2%
            // 添加水印文字
            // 设置文本样式和阴影

            ctx.textAlign = 'right'
            ctx.textBaseline = 'bottom'
            ctx.font = `${fontSize}px Microsoft YaHei`
            ctx.shadowOffsetX = 0
            ctx.shadowOffsetY = 0
            ctx.shadowBlur = 5
            ctx.shadowColor = 'rgb(0, 0, 0)'
            // 绘制矩形
            ctx.fillStyle = 'rgb(255, 255, 255)' // 矩形的填充颜色
            // 绘制带阴影的文本，右下对齐
            ctx.fillText(currenDate, watermarkX, watermarkY - (fontSize + 10))
            ctx.fillText('数科帮', watermarkX, watermarkY)
            // 使用 dataURLtoFile 方法将 DataURL 转换为 File 对象
            // 使用与原始图片相同的MIME类型将canvas内容转换为DataURL
            var mimeType = file.type
            var quality = 0.8 // 设置您想要的压缩质量，0到1之间
            var dataURL = canvas.toDataURL(mimeType, quality)
            var new_dataURL = dataURLtoFile(dataURL, file.name)
            resolve({ dataURL: new_dataURL, img_width: img.width, img_height: img.height })
          }
          img.src = e.target.result
        }
        reader.onerror = function () {
          reject(reader.error)
        }
        reader.readAsDataURL(file)
      })
    },
    //将DataURL转换为File
    dataURLtoFile(dataurl, filename) {
      var arr = dataurl.split(','),
        mime = arr[0].match(/:(.*?);/)[1],
        bstr = atob(arr[1]),
        n = bstr.length,
        u8arr = new Uint8Array(n)
      while (n--) {
        u8arr[n] = bstr.charCodeAt(n)
      }
      return new File([u8arr], filename, { type: mime })
    },
    testFile(files, type) {
      // 验证文件类型和大小
      var fileValidationResults = this.validateFiles(files, type)
      // 如果有错误，显示错误信息并返回
      if (fileValidationResults.hasErrors) {
        this.showFileValidationError(fileValidationResults.errorMessages)
        return
      }
      // 定义文件上传的限制
      const limits = {
        img: 9,
        Replyimg: 1,
        file: 1
        // 其他类型不需要限制，所以不在这里定义
      }

      // 检查文件数量限制（仅对已定义的类型）
      if (limits[type] && files.length > limits[type]) {
        this.$message({
          message: `请最多选择${limits[type]}个文件`,
          type: 'warning'
        })
        return
      }
      // 根据文件类型执行不同的操作
      if (type === 'Replyimg') {
        this.replyLoad[this.replyIndex] = true
        this.handleReplyImgUpload(files)
      } else {
        this.showSendFile(files, type)
      }
    },
    /**
     * 验证文件类型和大小的方法
     */
    validateFiles(files, type) {
      const tipString = {
        all: '请上传jpg、jpeg、gif、png、txt、pdf、doc、docx、xls、xlsx、ppt、pptx、rar、zip文件!',
        img: '请上传jpg、jpeg、gif、png文件!',
        file: '请上传txt、pdf、doc、docx、xls、xlsx、ppt、pptx、rar、zip文件!',
        Replyimg: '请上传jpg、jpeg、gif、png文件!'
      }
      const errorMessages = []

      for (const file of files) {
        const suffName = this.$tools.getFileSuffix(file.name)
        if (!this.$tools.isFileTypeOk(suffName, type)) {
          errorMessages.push(tipString[type])
        } else if (!this.$tools.isFileLess(file.size, 500)) {
          errorMessages.push('请上传小于500M的文件!')
        }
      }

      return {
        hasErrors: errorMessages.length > 0,
        errorMessages
      }
    },
    /**
     *  显示文件错误提示
     */
    showFileValidationError(errorMessages) {
      errorMessages.forEach((message) => {
        this.$message({
          message,
          type: 'warning'
        })
      })
    },
    /**
     * 上传回复评论图片并添加水印
     */
    // handleReplyImgUpload(files) {
    //   var file = files[0],
    //     fileNames = [],
    //     fileSrcs = []
    //   this.$tools.getStsClient(this, file, (state, client, bucketName, file) => {
    //     if (state) {
    //       // 添加水印
    //       this.watermarkImage(file, this.dataURLtoFile)
    //         .then(({ dataURL, img_width, img_height }) => {
    //           // 调用uploadFile函数上传加水印的图片
    //           this.uploadFile(client, bucketName, dataURL, (key) => {
    //             var url = 'https://www.ccccdt.com/ccccdt/' + key
    //             fileNames.push(file.name)
    //             fileSrcs.push(url)
    //             this.recordItem.replyTxt = fileNames.join('|')
    //             this.recordItem.replyImg_src = fileSrcs.join('|')
    //             this.recordItem.img_width = img_width
    //             this.recordItem.img_height = img_height
    //             this.sendReplyInfo(this.recordItem, this.replyIndex)
    //           })
    //         })
    //         .catch((error) => {
    //           console.error('Error adding watermark:', error)
    //           // 处理添加水印的错误
    //         })
    //     }
    //   })
    // },
    //显示添加文件弹框
    showSendFile(files, type) {
      var suffName = this.$tools.getFileSuffix(files[0].name) //后缀名
      if (type === 'img') {
        this.currFile.isImg = true
        this.currFile.icon = '/skb/img/chat/ic_img.png'
      } else {
        this.currFile.isImg = false
        this.currFile.icon = '/skb/img/chat/ic_' + suffName + '.png'
      }
      this.dialogSendFile = true

      for (var i = 0; i < files.length; i++) {
        var name = files[i].name,
          size = files[i].size
        this.currFile.files.push(files[i])
        this.currFile.name.push(name)
        this.currFile.size.push(this.$tools.getFileSizeString(size))
      }
    },
    //清空file
    resetFile() {
      this.$refs.fileInputimg.value = ''
      this.$refs.fileInputfile.value = ''
      this.currFile.isImg = true
      this.currFile.icon = ''
      this.currFile.files = []
      this.currFile.name = []
      this.currFile.size = []
    },
    //取消发送文件
    quitSendFile() {
      this.dialogSendFile = false
      this.resetFile()
    },
    /**
     * 发送文件关闭之前回调
     */
    sendClose(done) {
      this.resetFile()
      done()
    },
    //确定发送文件
    sureSendFile() {
      var type = this.currFile.isImg ? 'Img' : 'File',
        messageType = this.currFile.isImg ? '3' : '4',
        fileNames = []
      var fileObjs = {
        messageType: messageType,
        message: []
      }

      var html = this.$refs.editor.innerHTML,
        atReg = /user_id="\d+"\>/g,
        atUsers = html.match(atReg) || [],
        atUserIds = [],
        atUserIds = atUsers.map((item) => {
          return item.split('="')[1].replace('>', '').replace('"', '')
        })
      this.dialogSendFile = false
      this.lock.sendMess = true
      Promise.all(
        this.currFile.files.map((file, index) => {
          return new Promise((resolve, reject) => {
            this.$tools.getStsClient(this, file, (state, client, bucketName, file) => {
              if (state) {
                if (type === 'Img') {
                  // 添加水印
                  this.watermarkImage(file, this.dataURLtoFile)
                    .then(({ dataURL, img_width, img_height }) => {
                      this.uploadFile(client, bucketName, dataURL, (key) => {
                        var url = 'https://www.ccccdt.com/ccccdt/' + key
                        fileNames.push(file.name)
                        fileObjs.message.push({
                          fileName: file.name,
                          fileUrl: url,
                          fileSize: file.size,
                          fileSuffix: file.name.substring(file.name.lastIndexOf('.') + 1),
                          sort: index + 1,
                          imgWidth: img_width,
                          imgHeight: img_height
                        })
                        if (fileNames.length === this.currFile.files.length) {
                          this.sendMess(
                            {
                              messageType: messageType,
                              message: JSON.stringify(fileObjs),
                              to_who: atUserIds.join(),
                              privateUserId: this.privateUserId,
                              pureMode: 0,
                              returnPageSize: 0,
                              singleReceiptUid: this.receiptUserId
                            },
                            () => {
                              this.resetFile()
                            }
                          )
                        }
                      })
                    })
                    .catch((error) => {
                      console.error('Error adding watermark:', error)
                      reject(error)
                    })
                } else {
                  this.uploadFile(client, bucketName, file, (key) => {
                    var url = 'https://www.ccccdt.com/ccccdt/' + key
                    fileNames.push(file.name)
                    fileObjs.message.push({
                      fileName: file.name,
                      fileUrl: url,
                      fileSize: file.size,
                      fileSuffix: file.name.substring(file.name.lastIndexOf('.') + 1),
                      sort: index + 1
                    })
                    if (fileNames.length === this.currFile.files.length) {
                      //全部上传完毕
                      this.sendMess(
                        {
                          messageType: messageType,
                          message: JSON.stringify(fileObjs),
                          to_who: atUserIds.join(),
                          privateUserId: this.privateUserId,
                          pureMode: 0,
                          returnPageSize: 0,
                          singleReceiptUid: this.receiptUserId
                        },
                        () => {
                          this.resetFile()
                        }
                      )
                    }
                  })
                }
              } else {
                reject(new Error('Failed to get STS client'))
              }
            })
          })
        })
      )
        .then(() => {
          // 所有文件上传完成后，发送消息
          //this.lock['send' + type] = false
          this.resetFile()
          //this.$emit('onUploadFile')
        })
        .catch((error) => {
          console.error('Error during file upload:', error)
          // this.lock['send' + type] = false
        })
    },
    //上传文件、成功和进度回调
    uploadFile(client, bucketName, file, cbSucess, cbProgress) {
      var time = new Date().getTime() + '',
        key = time.split('').reverse().join('') + this.$tools.getRandomFileName(file),
        params = {
          Body: file, //成功和进度回调
          Bucket: bucketName,
          Key: key,
          ContentDisposition: `attachment; filename="${encodeURIComponent(file.name)}"`
        }
      client
        .putObject(params, (err, data) => {
          if (err) {
          } else {
            cbSucess(key)
          }
        })
        .on('httpUploadProgress', (progress) => {
          if (cbProgress) {
            cbProgress(progress)
          }
        })
    },
    //获取消息
    getMessText() {
      var text = this.$refs.editor.innerText,
        html = this.$refs.editor.innerHTML,
        dangerReg = /[\<\>]/,
        atReg = /user_id="\d+"\>/g,
        atUsers = html.match(atReg) || [],
        atUserIds = [],
        atUserIds = atUsers.map((item) => {
          return item.split('="')[1].replace('>', '').replace('"', '')
        })
      if (dangerReg.test(text)) {
        this.$message({
          message: '发送内容包含危险字符，请重新编辑!',
          type: 'warning'
        })
        return
      } else {
        var reg = /^私聊[a-zA-Z0-9_\u4e00-\u9fa5]+：\s{1}/, //去除'私聊'
          text = text.replace(reg, '')

        if (text.trim() === '') {
          //发送空白提示
          this.isShowSendPopover = true
          setTimeout(() => {
            this.isShowSendPopover = false
          }, 2000)
        } else {
          var messageArr = text.split('\n')
          let regex = /\【回执消息-(.*?)\】/g

          var messageObj = []
          messageArr.forEach((item, index) => {
            let replacedText = item.replace(regex, '')
            if (index == messageArr.length - 1) {
              // 假设我们要将其替换为空字符串，即删除
              messageObj.push({
                content: replacedText.trim(),
                bold: '',
                wrap: 'false',
                color: '',
                sort: index + 1 + ''
              })
            } else {
              // 假设我们要将其替换为空字符串，即删除
              messageObj.push({
                content: replacedText.trim(),
                bold: '',
                wrap: 'true',
                color: '',
                sort: index + 1 + ''
              })
            }
          })
          var messageJson = {
            messageType: '2',
            message: messageObj
          }
          this.sendMess({
            messageType: '2',
            message: JSON.stringify(messageJson),
            to_who: atUserIds.join(),
            privateUserId: this.privateUserId,
            pureMode: 0,
            returnPageSize: 0,
            singleReceiptUid: this.receiptUserId
          })
        }
      }
    },

    //发送消息
    sendMess(opt, cbSucess) {
      var data = [
          {
            groupId: this.query.groupId,
            message: opt.message,
            messageType: opt.messageType,
            userId: this.uid,
            privateUserId: opt.privateUserId,
            pureMode: opt.pureMode,
            returnPageSize: opt.returnPageSize,
            singleReceiptUid: opt.singleReceiptUid,
            toWho: opt.to_who
          }
        ],
        domain = [this.$store.state.DOMAIN],
        path = ['/project/customGroup/sendMsg'],
        dataAxios = this.$tools.getDataAxios(this, domain, path, data)
      this.lock.sendMess = true
      Promise.all(dataAxios)
        .then((response) => {
          this.$tools.callbackAxios(this, response, (response) => {
            var data = response[0].data
            if (data.code === 200) {
              this.$refs.editor.innerHTML = ''
              this.privateUserId = 0
              this.receiptUserId = 0
              this.lock.sendMess = false
              this.isShowPlaceholder = true
              if (cbSucess) {
                cbSucess()
              }
            } else {
              this.lock.sendMess = false
              this.$message({
                message: data.message,
                type: 'warning',
                duration: 2000,
                onClose: () => {
                  if (cbSucess) {
                    cbSucess()
                  }
                }
              })
            }
          })
        })
        .catch((error) => {
          this.lock.sendMess = false
        })
    },
    // 统计艾特,私聊的标题长度
    getSpanToNbspLength(htmlString) {
      // 正则表达式匹配从<span class="dt-editor-at"或<span class="dt-editor-send">开始到&nbsp;结束的字符串
      const regex = /<span class="dt-editor-(at|send|receipt)"[^>]*>.*?<\/span>&nbsp;/

      // 执行正则表达式匹配
      const match = htmlString.match(regex)

      // 如果匹配成功，计算匹配到的整个内容的长度
      if (match && match[0]) {
        return match[0].length
      }

      // 如果没有匹配到内容，返回0
      return 0
    },
    //监听500字
    setMaxlength(len) {
      var html = this.$refs.editor.innerHTML
      var strNum = this.getSpanToNbspLength(html)
      this.isShowPlaceholder = false
      if (html.length >= len + strNum) {
        this.$refs.editor.innerHTML = html.substring(0, len + strNum)
        // 设置光标位置
        var range = document.createRange()
        range.selectNodeContents(this.$refs.editor)
        range.collapse(false)
        var sel = window.getSelection()
        sel.removeAllRanges()
        sel.addRange(range)
      }
    },
    //keypress调用
    editorKeyPress() {
      this.setMaxlength(500)
    },
    //监听enter(keyup之前监听)
    editorKeyDown(e) {
      console.log('editorKeyDown===========', e)
      //ctrl+enter 换行
      if (e.key === 'Enter') {
        if (e.ctrlKey) {
          var html = this.$refs.editor.innerHTML
          this.isShowPlaceholder = false
          this.$refs.editor.innerHTML = html === '' ? '<br><br>' : html + '<br>'
          // 设置光标位置
          var range = document.createRange()
          range.selectNodeContents(this.$refs.editor)
          range.collapse(false)
          var sel = window.getSelection()
          sel.removeAllRanges()
          sel.addRange(range)
        } else {
          this.getMessText()
        }
        e.preventDefault()
      }
    },
    //监听普通输入和删除键
    editorKeyUp(e) {
      if (e.key === 'Backspace') {
        //dom在down后up前所以监听up
        if (!$('.dt-editor-send')[0]) {
          this.privateUserId = 0
        }
        if (!$('.dt-editor-receipt')[0]) {
          this.receiptUserId = 0
        }
      }

      if (e.key !== 'Control' && e.key !== 'Shift' && e.key !== 'Alt') {
        setTimeout(() => {
          var html = this.$refs.editor.innerHTML
          if (html === '') {
            this.isShowPlaceholder = true
          } else {
            this.isShowPlaceholder = false
          }
        }, 20)
      }
    },
    //拖拽相关
    dragenter() {
      this.isDraging = true
    },
    dragleave() {
      this.isDraging = false
    },
    drop(e) {
      var files = e.dataTransfer.files
      this.dragleave()
      var typeArr = []
      if (files[0]) {
        for (const file of files) {
          const suffName = this.$tools.getFileSuffix(file.name)
          if (this.$tools.imgMap.includes(suffName)) {
            typeArr.push('img')
          } else if (this.$tools.fileMap.includes(suffName)) {
            typeArr.push('file')
          } else {
            typeArr.push('all')
          }
        }
        if (this.areAllElementsEqual(typeArr)) {
          this.testFile(files, typeArr[0])
        } else {
          this.$message({
            message: '请单独发送文件和图片',
            type: 'warning'
          })
        }
      }
    },
    paste(e) {
      var files = e.clipboardData.files
      var typeArr = []
      if (files[0]) {
        for (const file of files) {
          const suffName = this.$tools.getFileSuffix(file.name)
          if (this.$tools.imgMap.includes(suffName)) {
            typeArr.push('img')
          } else if (this.$tools.fileMap.includes(suffName)) {
            typeArr.push('file')
          } else {
            typeArr.push('all')
          }
        }
        if (this.areAllElementsEqual(typeArr)) {
          this.testFile(files, typeArr[0])
        } else {
          this.$message({
            message: '请单独发送文件和图片',
            type: 'warning'
          })
        }
        e.preventDefault()
        //粘贴文件
        // var suffName = this.$tools.getFileSuffix(files[0].name), //后缀名
        //   type = ''
        // if (this.$tools.imgMap.includes(suffName)) {
        //   type = 'img'
        // } else if (this.$tools.fileMap.includes(suffName)) {
        //   type = 'file'
        // } else {
        //   type = 'all'
        // }
        // this.testFile(files, type)
        // e.preventDefault()
      } else {
        //粘贴纯文本去除样式
        var text = '',
          event = e.originalEvent || e
        if (event.clipboardData && event.clipboardData.getData) {
          text = event.clipboardData.getData('text/plain')
        } else if (window.clipboardData && window.clipboardData.getData) {
          text = window.clipboardData.getData('Text')
        }
        if (document.queryCommandSupported('insertText')) {
          document.execCommand('insertText', false, text)
        } else {
          document.execCommand('paste', false, text)
        }

        setTimeout(() => {
          this.setMaxlength(500)
        }, 10)
      }
    },
    /**
     * 检查文件数组类型是否不同
     */
    areAllElementsEqual(arr) {
      if (arr.length === 0) {
        // 如果数组为空，则认为没有元素可以比较，返回true（这取决于你的业务逻辑，也可能是false）
        return true
      }
      const firstElement = arr[0]
      return arr.every((element) => element === firstElement)
    },
    //获取@成员数据
    getAtList(text, cb) {
      var data = [{ groupId: this.query.groupId, userId: this.uid, keywords: '' }],
        domain = [this.$store.state.DOMAIN],
        path = ['/project/customGroup/groupMember'],
        dataAxios = this.$tools.getDataAxios(this, domain, path, data)
      Promise.all(dataAxios)
        .then((response) => {
          this.$tools.callbackAxios(this, response, (response) => {
            var data = response[0].data
            if (data.code === 200) {
              data.data.unshift({
                userId: 0,
                userName: '所有人',
                headImg: 'https://projectwebuserapi.ccccdt.com/upload/avatars/default/default_girl.png'
              })
              data.data = data.data.filter((item) => item.userId != this.uid)
              cb(data.data)
              //加载@头像居中
              $(document)
                .find('.tribute-container .el-image img')
                .on('load', (e) => {
                  $(e.target).next('i').remove()
                  this.$tools.loadImgCenter(e, 24)
                })
            }
          })
        })
        .catch((error) => {})
    },
    //初始化@列表
    initAtList() {
      var _this = this
      this.tribute = new Tribute({
        collection: [
          {
            values(text, cb) {
              _this.getAtList(text, (users) => cb(users))
            },
            selectTemplate(item) {
              return (
                '<span class="dt-editor-at" contenteditable="false" user_id="' +
                item.original.userId +
                '">' +
                '@' +
                item.original.userName +
                '</span>'
              )
            },
            menuItemTemplate(item) {
              return (
                '<div class="el-image"><img src="' +
                _this.$tools.getStsFileUrl(_this.uid, item.original.headImg) +
                '"><i class="el-icon-loading"></i></div><span>' +
                item.original.userName +
                '</span>'
              )
            },
            lookup: 'name',
            requireLeadingSpace: false
          }
        ]
      })
      this.tribute.attach(this.$refs.editor)
    },

    handleScript(script) {
      if (script.src.includes('oos-sdk-6.0.min.js')) {
        script.onload = () => {
          console.log('天翼云脚本加载完成')
        }
      } else if (script.src.includes('tribute.min.js')) {
        script.onload = () => {
          console.log('Tribute插件加载完成')
          this.initAtList()
        }
      }
    },
    // 显示回执消息弹窗
    showReceipt() {
      this.receiptShow = true
    },
    //回执消息全选参与人
    selectReceiptAll() {
      this.receiptForm.joinUserIds = this.receiptMemberList.map((item) => {
        return item.userId + ''
      })
    },
    // 获取群成员
    getMemberList() {
      var data = [{ groupId: this.query.groupId, userId: this.uid, keywords: '' }],
        domain = [this.$store.state.DOMAIN],
        path = ['/project/customGroup/groupMember'],
        dataAxios = this.$tools.getDataAxios(this, domain, path, data)
      Promise.all(dataAxios)
        .then((response) => {
          this.$tools.callbackAxios(this, response, (response) => {
            var data = response[0].data
            if (data.code === 200) {
              this.userList = data.data
              this.searchUserList = JSON.parse(JSON.stringify(this.userList))
              this.receiptMemberList = data.data.filter((item) => item.userId != this.uid)
              this.receiptMemberListCopy = [...this.receiptMemberList]
            }
          })
        })
        .catch((error) => {})
    },
    /* *************回执消息上传文件操作******************** */
    handleChange(file, fileList) {
      var url = 'https://www.ccccdt.com/ccccdt/' + file.raw.key
      file = {
        ...file,
        url: url
      }
      this.receiptForm.fileList = [...this.receiptForm.fileList, file]
      // console.log(this.receiptForm.fileList)
    },
    httpRequest(req) {
      this.$tools.getStsClient(this, req.file, (state, client, bucketName, file) => {
        if (state) {
          this.uploadFileAnnex(client, bucketName, file)
        }
      })
    },

    uploadFileAnnex(client, bucketName, file) {
      var time = new Date().getTime() + '',
        key = time.split('').reverse().join('') + this.$tools.getRandomName(file)
      var params = {
        Body: file,
        Bucket: bucketName,
        Key: key,
        ContentDisposition: `attachment; filename="${encodeURIComponent(file.name)}"`
      }
      client
        .putObject(params, (err, data) => {
          if (err) {
          } else {
            this.onSuccess(file, key)
          }
        })
        .on('httpUploadProgress', (progress) => {
          this.onProgress(progress, file)
        })
    },
    onSuccess(file, key) {
      this.receiptForm.fileList.forEach((item) => {
        if (item.uid == file.uid) {
          item.status = 'success'
          item.url = 'https://www.ccccdt.com/ccccdt/' + key
        }
      })
    },
    onProgress(progress, file) {
      if (progress.lengthComputable) {
        var index = this.receiptForm.fileList.findIndex((item) => item.uid === file.uid)
        this.receiptForm.fileList[index].percentage = Number(((progress.loaded / progress.total) * 100).toFixed(0))
      }
    },
    handleRemove(file) {
      this.receiptForm.fileList = this.receiptForm.fileList.filter((item) => item.uid !== file.uid)
    },
    beforeAvatarUpload(file) {
      const isLt2M = file.size / 1024 / 1024 < 20
      if (!isLt2M) {
        this.$message.error('上传文件大小不能超过 20MB!')
        // 找到要删除的对象的索引
        let index = this.receiptForm.fileList.findIndex((item) => item.uid === file.uid)
        // 如果找到了对象，使用splice方法删除它
        if (index !== -1) {
          this.receiptForm.fileList.splice(index, 1)
        }
      }
      return isLt2M
    },
    handleExceed(files, fileList) {
      this.$message.warning(`最多添加5个附件`)
    },
    /*************************** 文件上传结束***********************************************************/
    // 关闭回执消息弹窗
    receiptClose() {
      this.receiptForm.title = ''
      this.receiptForm.joinUserIds = []
      this.receiptForm.fileList = []
      this.receiptForm.description = ''
      this.$refs.receiptForm.resetFields()
      this.receiptShow = false
      this.receiptMemberList = [...this.receiptMemberListCopy]
      this.receiptSearchMember = ''
      this.receiptForm.endTime = ''
      this.receiptForm.isEndTime = false
      this.$nextTick(() => {
        this.$refs.receiptForm.clearValidate()
      })
      this.removeClass()
    },
    // 参与人多选框打开收起移除hover类名
    removeClass() {
      // 获取所有的li元素
      var liElements = document.querySelectorAll('ul.el-scrollbar__view li.el-select-dropdown__item')

      // 遍历li元素并移除hover类名
      liElements.forEach(function (li) {
        li.classList.remove('hover')
      })
    },
    // 回执消息开关切换
    switchCli(newValue) {
      this.receiptForm.isEndTime = newValue
      if (this.receiptForm.isEndTime) {
        this.receiptForm.endTime = this.getNowFormatDate('1')
      } else {
        this.receiptForm.endTime = ''
      }
    },
    // 初始化截止时间
    getNowFormatDate(type) {
      // 获取当前时间
      let now = new Date()
      // 增加2小时
      if (type == '1') {
        now.setHours(now.getHours() + 2)
      }

      // 格式化日期
      let year = now.getFullYear()
      let month = (now.getMonth() + 1).toString().padStart(2, '0') // 月份是从0开始的
      let day = now.getDate().toString().padStart(2, '0')
      let hours = now.getHours().toString().padStart(2, '0')
      let minutes = now.getMinutes().toString().padStart(2, '0')
      let seconds = now.getSeconds().toString().padStart(2, '0')

      return `${year}-${month}-${day} ${hours}:${minutes}`
    },
    // 限制时间的选择不能小于当前时间
    changeDate(value) {
      // 解析输入的时间字符串为Date对象
      const inputDate = new Date(value.replace(/-/g, '/'))
      // 获取当前时间，并格式化为分
      const now = new Date()
      now.setSeconds(0, 0) // 清除秒和毫秒，只比较到分钟
      // 比较输入时间与当前时间
      if (inputDate < now) {
        this.$message.warning('输入的时间比当前时间小，请选择一个未来的时间。')
        this.receiptForm.endTime = this.getNowFormatDate()
      }
    },
    // 发送回执消息
    sendReceipt(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          var fileList = []
          if (this.receiptForm.fileList.length > 0) {
            fileList = this.receiptForm.fileList.map((item) => {
              // console.log(item.name.substring(item.name.lastIndexOf('.') + 1))
              return {
                fileName: item.name,
                fileUrl: item.url,
                fileSize: item.size,
                fileSuffix: item.name.substring(item.name.lastIndexOf('.') + 1)
                // item.raw.type.split('/')[1]
              }
            })
          } else {
            fileList = ''
          }
          var data = [
              {
                description: this.receiptForm.description,
                groupId: this.query.groupId,
                title: this.receiptForm.title,
                userId: this.uid,
                fileList: this.receiptForm.fileList.length > 0 ? JSON.stringify(fileList) : fileList,
                joinUserIds: this.receiptForm.joinUserIds.join(),
                endTime: this.receiptForm.endTime
              }
            ],
            domain = [this.$store.state.DOMAIN],
            path = ['/project/customGroup/sendReceiptCardMsg'],
            dataAxios = this.$tools.getDataAxios(this, domain, path, data)
          Promise.all(dataAxios)
            .then((response) => {
              this.$tools.callbackAxios(this, response, (response) => {
                var data = response[0].data
                if (data.code === 200) {
                  this.receiptClose()
                } else {
                  this.$message.warning(data.message)
                }
              })
            })
            .catch((error) => {})
        } else {
          console.log('error submit!!')
          return false
        }
      })
    },
    /**
     * 实现人员的模糊搜索
     */
    fuzzySearch() {
      const lowerCaseSearchTerm = this.receiptSearchMember.toLowerCase()
      if (lowerCaseSearchTerm == '') {
        this.receiptMemberList = [...this.receiptMemberListCopy]
      }
      this.receiptMemberList = this.receiptMemberListCopy.filter((item) => {
        // 检查user_id, user_name, safe_phone是否包含搜索词
        const userIdMatch = item.userId.toString().includes(lowerCaseSearchTerm)
        const userNameMatch = item.userName.toLowerCase().includes(lowerCaseSearchTerm)
        // const safePhoneMatch = item.safe_phone.includes(lowerCaseSearchTerm)
        // 如果任意一个属性匹配，则返回true
        return userIdMatch || userNameMatch
      })
    },
    receiptSearchMemberChange() {
      this.$nextTick(() => {
        this.$refs['receiptForm'].clearValidate('joinUserIds')
      })
    },

    //右键@ 区分聊天室和右侧列表
    appendAtuser(type, userId, userName) {
      // $('.dt-editor').each(function () {
      //   console.log($(this).html())
      // })
      var str = this.clearAppendOpt($('.dt-editor').html(), '1')
      $('.dt-editor').html(str)
      if (type === 'panel') {
        var text = '<span class="dt-editor-at" contenteditable="false" user_id="' + userId + '">@' + userName + '</span> '
        $('.dt-editor').append(text)
        var range = window.getSelection() //创建range
        range.selectAllChildren($('.dt-editor')[0]) //range 选择editor下所有子内容
        range.collapseToEnd() //光标移至最后
        this.isShowPlaceholder = false
      } else if (type === 'member') {
        // if (this.pure_user_id) {
        //   this.$confirm('该操作需要退出纯净模式，确定退出吗?', '提示', {
        //     confirmButtonText: '确定',
        //     cancelButtonText: '取消',
        //     cancelButtonClass: 'el-button--primary is-plain',
        //     iconClass: 'el-none-icon'
        //   })
        //     .then(() => {
        //       this.exitPureMode('Atuser', user_id, user_name)
        //     })
        //     .catch(() => {})
        // } else {
        var text = '<span class="dt-editor-at" contenteditable="false" user_id="' + userId + '">@' + userName + '</span> '
        $('.dt-editor').append(text)
        var range = window.getSelection() //创建range
        range.selectAllChildren($('.dt-editor')[0]) //range 选择editor下所有子内容
        range.collapseToEnd() //光标移至最后
        this.isShowPlaceholder = false
        // }
      }
    },
    //右键私聊 区分聊天室和右侧列表
    appendPrivate(type, userId, userName) {
      var str = this.clearAppendOpt($('.dt-editor').html(), '2')
      $('.dt-editor').html(str)
      if (type === 'panel') {
        if (this.privateUserId === 0) {
          var text = '<span class="dt-editor-send" contenteditable="false">私聊<em>' + userName + '</em>：</span> '
          $('.dt-editor').prepend(text)
        } else {
          $('.dt-editor').find('.dt-editor-send em').text(userName)
        }
        var range = window.getSelection() //创建range
        range.selectAllChildren($('.dt-editor')[0]) //range 选择editor下所有子内容
        range.collapseToEnd() //光标移至最后
        this.privateUserId = userId
        this.isShowPlaceholder = false
      } else if (type === 'member') {
        // if (this.pure_user_id) {
        //   this.$confirm('该操作需要退出纯净模式，确定退出吗?', '提示', {
        //     confirmButtonText: '确定',
        //     cancelButtonText: '取消',
        //     cancelButtonClass: 'el-button--primary is-plain',
        //     iconClass: 'el-none-icon'
        //   })
        //     .then(() => {
        //       this.exitPureMode('Private', user_id, user_name)
        //     })
        //     .catch(() => {})
        // } else {
        if (this.privateUserId === 0) {
          var text = '<span class="dt-editor-send" contenteditable="false">私聊<em>' + userName + '</em>：</span> '
          $('.dt-editor').prepend(text)
        } else {
          $('.dt-editor').find('.dt-editor-send em').text(userName)
        }
        var range = window.getSelection() //创建range
        range.selectAllChildren($('.dt-editor')[0]) //range 选择editor下所有子内容
        range.collapseToEnd() //光标移至最后
        this.privateUserId = userId
        this.isShowPlaceholder = false
        // }
      }
    }, //右键回执 区分聊天室和右侧列表
    appendReceipt(type, userId, userName) {
      var str = this.clearAppendOpt($('.dt-editor').html(), '3')
      $('.dt-editor').html(str)
      if (type === 'panel') {
        if (this.receiptUserId === 0) {
          var text = '<span class="dt-editor-receipt" contenteditable="false">【回执消息-<em>' + userName + '</em>】</span> '
          $('.dt-editor').prepend(text)
        } else {
          $('.dt-editor').find('.dt-editor-receipt em').text(userName)
        }
        var range = window.getSelection() //创建range
        range.selectAllChildren($('.dt-editor')[0]) //range 选择editor下所有子内容
        range.collapseToEnd() //光标移至最后
        this.receiptUserId = userId
        this.isShowPlaceholder = false
      } else if (type === 'member') {
        // if (this.pure_user_id) {
        //   this.$confirm('该操作需要退出纯净模式，确定退出吗?', '提示', {
        //     confirmButtonText: '确定',
        //     cancelButtonText: '取消',
        //     cancelButtonClass: 'el-button--primary is-plain',
        //     iconClass: 'el-none-icon'
        //   })
        //     .then(() => {
        //       this.exitPureMode('Private', user_id, user_name)
        //     })
        //     .catch(() => {})
        // } else {
        if (this.receiptUserId === 0) {
          var text = '<span class="dt-editor-receipt" contenteditable="false">【回执消息-<em>' + userName + '</em>】</span> '
          $('.dt-editor').prepend(text)
        } else {
          $('.dt-editor').find('.dt-editor-receipt em').text(userName)
        }
        var range = window.getSelection() //创建range
        range.selectAllChildren($('.dt-editor')[0]) //range 选择editor下所有子内容
        range.collapseToEnd() //光标移至最后
        this.receiptUserId = userId
        this.isShowPlaceholder = false
        // }
      }
    },
    //  右键操作之前先清除其他的操作
    clearAppendOpt(str, type) {
      this.privateUserId = 0
      this.receiptUserId = 0
      //  const regex = /<span class="dt-editor-(at|send)"[^>]*>.*?<\/span>&nbsp;/g
      if (type == '1') {
        var regex = /<span class="dt-editor-(send|receipt)"[^>]*>.*?<\/span>&nbsp;/g
      } else if (type == '2') {
        var regex = /<span class="dt-editor-(at|receipt)"[^>]*>.*?<\/span>&nbsp;/g
      } else {
        var regex = /<span class="dt-editor-(at|send)"[^>]*>.*?<\/span>&nbsp;/g
      }

      const cleanedStr = str.replace(regex, '')

      return cleanedStr
    },
    // 聊天记录start
    generateTimestamp() {
      return new Date().getTime()
    },
    resetHistory() {
      this.page = 1
      this.searchRecordList = []
    },
    historyClose() {
      this.resetHistory()
      this.selectFilter = {}
      this.searchTime = ''
      this.searchKeywords = ''
      this.isSearchSubGroup = false
      this.subGroupRecordList = []
      this.recordCount = 0
    },
    showChatHistory() {
      //获取历史聊天记录
      this.searchTime = ''
      this.selectFilter = {}
      this.isUserListShow = false
      this.resetHistory()
      this.searchTime = this.$tools.getDateFormatString('ymdhms')
      this.getRecordList()
      this.dialogChatHistory = true
    },
    searchHistory() {
      if (this.isSearchSubGroup) {
        this.totalRecord = 0
        this.resetHistory()
        this.getSubGroupList()
      } else {
        this.resetHistory()
        this.getRecordList()
      }
    },
    escapeRegExp(string) {
      return string.replace(/[.*+?^${}()|[\]\\]/g, '\\$&')
    },
    highlighted(str) {
      if (this.searchKeywords) {
        let regex = new RegExp(`(${this.escapeRegExp(this.searchKeywords)})`, 'gi')
        return str.replace(regex, '<span style="color:#2f54eb">$1</span>')
      } else {
        return str
      }
    },
    getRecordList(groupId = this.query.groupId) {
      // if (!this.searchKeywords) {
      //   return
      // }
      let selectUids = ''
      if (this.selectFilter.key == 1) {
        // scope=1时，查看指定用户ids
        selectUids = this.selectUsers
          .map((item) => {
            return item.userId
          })
          .join(',')
      }

      var data = [
          {
            userId: this.uid,
            endTime: this.searchTime,
            groupId: groupId,
            keywords: this.searchKeywords || '',
            page: this.page || 1,
            pageSize: 12,
            scope: this.selectFilter.key || 0,
            selectUids
          }
        ],
        domain = [this.$store.state.DOMAIN],
        path = ['/project/customGroup/searchRecordList'],
        dataAxios = this.$tools.getDataAxios(this, domain, path, data)
      Promise.all(dataAxios)
        .then((response) => {
          this.$tools.callbackAxios(this, response, (response) => {
            var data = response[0].data
            if (data.code === 200) {
              this.chatHistoryLoading = false
              this.totalRecord = data.data.total_record
              data.data.items.forEach((item) => {
                item.message = JSON.parse(item.message)
                if (item.replyCount > 3) {
                  item.isShowMoreCount = true
                } else {
                  item.isShowMoreCount = false
                }
                this.searchRecordList.push(item)
              })
            } else {
              this.$message({
                message: data.message,
                type: 'warning',
                duration: 2000,
                onClose: () => {
                  // this.handleClose()
                }
              })
            }
          })
        })
        .catch((error) => {})
    },
    //获取回复列表信息
    getReplyList(item) {
      var data = [{ recordId: item.recordId, userId: this.uid, page: 1, pageSize: 100000 }],
        domain = [this.$store.state.DOMAIN],
        path = ['/project/customGroup/replyList'],
        dataAxios = this.$tools.getDataAxios(this, domain, path, data)
      Promise.all(dataAxios)
        .then((response) => {
          this.$tools.callbackAxios(this, response, (response) => {
            var data = response[0].data
            if (data.code === 200) {
              item.isShowMoreCount = false
              item.reply = data.data.items
              // console.log(item)
            }
          })
        })
        .catch((error) => {})
    },
    // 收起评论框
    foldReplyList(item) {
      // console.log(item)
      item.isShowMoreCount = !item.isShowMoreCount
      item.reply = item.reply.slice(0, 3)
    },
    anchorPoint(item) {
      if (this.isSearchSubGroup) {
        if (item.groupId == this.query.groupId) {
          this.dialogChatHistory = false
          this.$emit('anchorPointEvent', item)
          this.searchRecordList = []
          this.page = 1
          this.searchKeywords = ''
        } else {
          this.dialogChatHistory = false
          this.searchRecordList = []
          this.page = 1
          this.searchKeywords = ''
          this.$socket.emit('leaveGroup', 'group-' + this.query.groupId)
          this.$router.push('/main/#/pc?tab=chat&groupId=' + item.groupId + '&recordId=' + item.recordId)
          this.$socket.emit('joinGroup', 'group-' + item.groupId)
          // this.$emit('anchorPointEvent', item)
        }
      } else {
        this.dialogChatHistory = false
        this.$emit('anchorPointEvent', item)
        this.searchRecordList = []
        this.page = 1
        this.searchKeywords = ''
      }
    },
    chatHistoryLoad() {
      this.chatHistoryLoading = true
      const loadChatHistory = () => {
        this.page += 1
        // this.chatHistoryLoading = false
        this.getRecordList(this.isSearchSubGroup ? this.currentGroup.groupId : undefined)
      }

      setTimeout(loadChatHistory, 500)
    },
    clearSearch() {
      this.searchKeywords = ''
      if (this.selectFilter.key == 1) {
        this.searchUserList = this.searchUserList.map((item) => {
          return {
            ...item,
            checked: false
          }
        })
      }
      this.totalRecord = 0
      this.selectFilter = {}
      this.searchHistory()
    },

    // 根据分类查找聊天记录
    searchByfilter(item) {
      if (item.key == 1) {
        //查看指定用户
        this.cutIndex = -1
        this.userListKeywords = ''
        this.searchUserList = JSON.parse(JSON.stringify(this.userList))
        this.isUserListShow = true
        return
      }
      this.searchKeywords = ''
      this.isUserListShow = false
      this.isSearchSubGroup = false
      this.selectFilter = item
      console.log('searchByfilter', this.historyFilter)

      this.searchHistory()
    },
    // 是否查找子群聊天记录
    searchSubGroup() {
      this.isSearchSubGroup = !this.isSearchSubGroup
      if (this.isSearchSubGroup) {
        this.totalRecord = 0
        this.getSubGroupList()
      } else {
        this.searchHistory()
      }
    },
    // 获取子群聊天记录
    getSubGroupList() {
      var data = [
          {
            userId: this.uid,
            groupId: this.query.groupId,
            keywords: this.searchKeywords || ''
          }
        ],
        domain = [this.$store.state.DOMAIN],
        path = ['/project/customGroup/searchRecordListWithSubGroup'],
        dataAxios = this.$tools.getDataAxios(this, domain, path, data)
      Promise.all(dataAxios)
        .then((response) => {
          this.$tools.callbackAxios(this, response, (response) => {
            var data = response[0].data
            if (data.code === 200) {
              // console.log(data, '----')
              this.subGroupRecordList = data.data
              // this.totalRecord = data.data.total_record
              // data.data.items.forEach((item) => {
              //   item.message = JSON.parse(item.message)
              //   if (item.replyCount > 3) {
              //     item.isShowMoreCount = true
              //   } else {
              //     item.isShowMoreCount = false
              //   }
              //   this.searchRecordList.push(item)
              // })
            } else {
              this.$message({
                message: data.message,
                type: 'warning',
                duration: 2000,
                onClose: () => {
                  // this.handleClose()
                }
              })
            }
          })
        })
        .catch((error) => {})
    },
    searchSubGroupItem(item) {
      this.currentGroup = item
      this.recordCount = item.recordCount
      this.resetHistory()
      this.getRecordList(item.groupId)
    }
    // 聊天记录end
  },
  mounted() {
    this.getMemberList()
    // 创建一个MutationObserver实例，用于监听DOM变动
    const observer = new MutationObserver((mutations) => {
      // 遍历所有变动
      mutations.forEach((mutation) => {
        // 如果有新增的节点
        if (mutation.addedNodes.length) {
          // 遍历新增的节点
          mutation.addedNodes.forEach((node) => {
            // 如果节点的标签名为'SCRIPT'
            if (node.tagName === 'SCRIPT') {
              // 调用handleScript方法处理该节点
              this.handleScript(node)
            }
          })
        }
      })
    })

    // 监听document.head的变动，当子节点发生变动时触发回调函数
    observer.observe(document.head, {
      childList: true
    })

    // 在组件销毁前断开MutationObserver的监听
    this.$once('hook:beforeDestroy', () => {
      observer.disconnect()
    })

    document.addEventListener('click', (e) => {
      this.isShowEmoji = false
    })
  },
  created() {
    // 使用防抖函数处理点击事件
    this.debouncedSearch = this.$tools.debounce(this.searchHistory, 580)
    this.debouncedSearchUsersHistory = this.$tools.debounce(this.searchUsersHistory, 580)
  },
  watch: {
    //路由hash变化 加载组件
    $route(to, from) {
      if (to.hash !== from.hash) {
        if (!to.hash.includes('tab=org') && this.query.groupId) {
          this.getMemberList()
          this.$refs.editor.innerHTML = ''
        }
        // if (this.query.groupId) {
        //   this.getMemberList()
        //   this.$refs.editor.innerHTML = ''
        // }
      }
    }
  }
}
</script>
<style scoped>
.dt-talk-input {
  height: 140px;
  background-color: #ffffff;
}
.dt-chat-content-int {
  padding: 40px 10px 10px 20px;
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  height: 89px;
}
.dt-chat-content-int .dt-el-icon {
  font-size: 18px;
  position: absolute;
  color: #606266;
  top: 10px;
  cursor: pointer;
}
i.dt-el-icon.dt-icon-emoji {
  left: 16px;
  top: 8px;
}
.el-icon-folder-opened {
  /* left: 16px; */
  left: 45px;
}
.el-icon-picture-outline {
  /* left: 45px; */
  left: 74px;
}
.el-icon-circle-check {
  /* left: 74px; */
  left: 103px;
}
.el-icon-chat-line-square {
  /* left: 103px; */
  left: 130px;
}
.dt-editor-towho {
  width: 102px;
  line-height: 1.5;
  color: #999;
}
.dt-chat-content-int.is-draging {
  background-color: rgb(0, 0, 0, 0.1);
  box-shadow: 0 0 20px rgb(192 195 192 / 40%);
}

.dt-editor-placeholder {
  pointer-events: none;
  position: absolute;
  user-select: none;
  color: #ccc;
  left: 20px;
  top: 42px;
}
.dt-editor {
  overflow: auto;
  width: 100%;
  flex: 1;
  height: 80px;
  border: none;
  line-height: 1.5;
  word-break: break-all;
  padding-right: 10px;
}

/* 滚动条轨道样式 */
::v-deep .dt-editor::-webkit-scrollbar {
  width: 6px; /* 设置滚动条宽度 */
}

/* 滚动条滑块样式 */
::v-deep .dt-editor::-webkit-scrollbar-thumb {
  background-color: #cccccc; /* 设置滑块背景颜色 */
  border-radius: 2px; /* 设置滑块圆角 */
  cursor: pointer;
}

/* 滚动条轨道hover状态样式 */
::v-deep .dt-editor::-webkit-scrollbar-track:hover {
  background-color: #f1f1f1; /* 设置轨道hover状态时的背景颜色 */
}

/* 滚动条滑块hover状态样式 */
::v-deep .dt-editor::-webkit-scrollbar-thumb:hover {
  background-color: #888; /* 设置滑块hover状态时的背景颜色 */
}

.dt-editor >>> .dt-editor-at {
  color: #fa884e;
}
.dt-editor >>> .dt-editor-receipt {
  color: #c0c4cc;
}
.dt-chat-upload-mark {
  top: 0;
  left: 0;
  z-index: 8;
  width: 100%;
  height: 100%;
  background: rgb(242, 242, 242, 0.5);
  font-size: 14px;
  color: #004898;
  text-align: center;
  line-height: 150px;
}
.dt-chat-content-int >>> .w-e-text-placeholder {
  font-style: normal;
}
.dt-chat-content-int-btn {
  padding: 16px 10px 0 12px;
}

.dt-dialog-list {
  max-height: 150px;
  overflow: auto;
}
/* .dt-dialog-box {
  padding-top: 20px;
} */
/*发送文件弹框*/
.dt-dialog-box {
  padding-top: 20px;
  display: flex;
}
.dt-dialog-box img {
  width: 40px;
  height: 40px;
}
.dt-dialog-info {
  margin-left: 10px;
}
.dt-dialog-info span {
  /* display: block; */
  /* margin: 7px 0; */
  margin-bottom: 7px;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-height: 1.5em; /* 根据实际需求调整行高 */
  overflow: hidden;
  text-overflow: ellipsis;
  color: #1f1f1f;
}
.dt-dialog-info em {
  font-size: 12px;
  color: #bbb;
}
/* 回执弹窗样式 */
.receiptBox >>> .el-dialog__header {
  border: none;
  padding: 20px;
}
.receiptBox >>> .el-dialog__body {
  padding: 0 20px;
}
.receiptBox >>> .el-input__inner {
  color: #1f1f1f;
}
.receiptBox >>> .el-textarea__inner {
  color: #1f1f1f;
}
.receiptBox >>> .el-dialog__footer {
  padding: 14px 20px;
}
.receiptBox >>> .el-upload__tip {
  display: inline-block;
  margin-left: 10px;
  color: #909399;
}
.dt-receipt-content >>> .el-input {
  width: 540px;
}
.dt-content-approval-achievement {
  display: flex;
  align-items: center;
  padding: 0 8px;
  border-radius: 4px;
}
.dt-content-approval-achievement:hover {
  background-color: #f0f5ff;
}
.dt-content-approval-achievement .dt-content-approval-filename {
  flex: 1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  width: 432px;
  color: #1f1f1f;
  font-size: 12px;
}
.dt-content-approval-filename > i {
  font-size: 14px;
  margin-right: 4px;
}
.dt-content-approval-achievement .dt-content-approval-btn {
  margin-left: 30px;
}
.el-dialog__wrapper >>> .el-dialog__footer {
  border-top: 1px solid #e9eef7;
}
.ml {
  margin-left: 10px;
}
.bgr {
  color: #f5222d;
}

.dt-content-approval-achievement >>> .el-input {
  flex: 1;
}
::v-deep .el-progress__text {
  font-size: 12px !important;
}
.dt-receipt-content-empty {
  padding: 10px 20px;
}
.dt-receipt-content-empty > p {
  margin-top: 10px;
  text-align: center;
  color: #606266;
}
/* .receiptBox-Switch >>> .el-switch__label--left {
  margin-right: -14px;
  z-index: 2;
  transform: translateX(5px);
} */
.receiptBox-switch-mediu {
  height: 22px;
  line-height: 22px;
}
.receiptBox-switch-mediu >>> .el-switch__core {
  width: 44px !important;
  height: 22px;
  line-height: 22px;
}
.receiptBox-switch-mediu >>> .el-switch__core:after {
  top: 2px;
}
.receiptBox-switch-left {
  position: absolute;
  left: 6px;
  z-index: 2;
  font-size: 12px;
  color: #fff;
  top: 1.5px;
}
.receiptBox-switch-right {
  position: absolute;
  left: 26px;
  z-index: 2;
  font-size: 12px;
  color: #fff;
  top: 1px;
}
.dt-receipt-content .receiptBox-switch-date {
  width: 460px;
  float: right;
}
.dt-receipt-content >>> .el-button--small {
  border-radius: 4px;
}
.dt-receipt-footer >>> .el-button--small {
  border-radius: 4px;
  padding: 11px 15px;
}
/* el-button el-button--default el-button--small */
.dt-receipt-footer >>> .el-button.el-button--default {
  padding: 11px 37.25px;
}
/* 回执弹窗样式 */
/* 修改私聊颜色 */
.dt-editor >>> .dt-editor-send {
  color: #9254de;
}
/* 查找聊天记录 */
.dialog-histiry-title > p {
  font-size: 18px;
  line-height: 18px;
  margin-bottom: 12px;
}
.dialog-histiry-title >>> .el-input {
  margin-bottom: 8px;
}

.dialog-histiry-title >>> .el-input--prefix .el-input__prefix {
  left: 8px !important;
}

.dialog-histiry-title >>> .el-input--prefix .el-input__inner {
  padding-left: 110px;
}

.tab-1 >>> .el-input--prefix .el-input__inner {
  padding-left: 492px;
}

.tab-2 >>> .el-input--prefix .el-input__inner {
  padding-left: 110px;
}

.tab-3 >>> .el-input--prefix .el-input__inner {
  padding-left: 122px;
}
.tab-4 >>> .el-input--prefix .el-input__inner {
  padding-left: 110px;
}
.tab-5 >>> .el-input--prefix .el-input__inner {
  padding-left: 94px;
}
.tab-6 >>> .el-input--prefix .el-input__inner {
  padding-left: 74px;
}
.tab-7 >>> .el-input--prefix .el-input__inner {
  padding-left: 74px;
}

.dialog-histiry-title >>> .el-tag.el-tag--info {
  height: 24px;
  font-size: 12px;
  color: #606266;
  line-height: 24px;
  border-color: #ced2db;
  background: #fafafa;
  margin-top: 6px;
}

.dialog-histiry-title .history-filte {
  display: flex;
}

.dialog-histiry-btn {
  font-size: 12px;
  color: #10239e;
  line-height: 17px;
  margin-right: 16px;
  cursor: pointer;
}
.dialog-histiry-btn >>> .el-button {
  padding: 0;
  font-size: 12px;
  color: #10239e;
}
.mb6 {
  margin-bottom: 6px;
}
.mr4 {
  margin-right: 4px;
}

.dt-record-list-left {
  width: 250px;
  border-right: 1px solid #e1e6f0;
  box-sizing: border-box;
  /* padding-left: 16px; */
  /* width: 230px;
  border-right: 1px solid#e1e6f0; */
}
.dt-record-list-sub-group-item {
  height: 60px;
  display: flex;
  align-items: center;
  cursor: pointer;
  padding-left: 16px;
}
.dt-record-list-sub-group-item:hover {
  background: #f0f5ff;
}

.dt-record-list-sub-group-item-tip {
  margin-left: 10px;
}
.dt-record-list-sub-group-item-tip > p:nth-of-type(1) {
  font-size: 14px;
  color: #303133;
}
.dt-record-list-sub-group-item-tip > p:nth-of-type(2) {
  color: #909399;
  font-size: 12px;
  margin-top: 4px;
}
.dt-record-list-right {
  display: flex;
  flex-direction: column;
  flex: 1;
  /* height: 518px; */
  /* margin-top: 14px; */
}
.dt-record-list-right-title {
  color: #909399;
  font-size: 12px;
  line-height: 40px;
  border-bottom: 1px solid #e1e6f0;
  padding-left: 20px;
}
.dt-scroll-container {
  height: 518px;
  overflow: auto;
}
.dt-record-list {
  padding-left: 20px;
  padding-right: 10px;
  padding-top: 14px;
  /* height: 300px; */
}
.infinite-list-wrapper >>> .el-loading-spinner {
  margin-top: 200px;
}
.dialogSearchBox >>> .el-dialog__header {
  padding-top: 18px;
  padding-bottom: 12px;
  font-size: 18px;
  color: #1f1f1f;
  background-color: #f2f3f5;
}
.dialogSearchBox >>> .el-dialog__body {
  padding-top: 0px;
  padding-left: 0px;
  padding-right: 0;
}
.dialogSearchBox >>> .el-input--small .el-input__inner {
  height: 28px;
  line-height: 28px;
  border-color: #e1e6f0;
}
.infinite-list-wrapper {
  /* padding-right: 10px; */
  /* margin-top: 20px; */
  /* width: 510px; */
  height: 532px;
  display: flex;
}

.infinite-list-wrapper .loading {
  margin: 24px 0px 18px;
  text-align: center;
  color: #606266;
}
.infinite-list-wrapper .noMore {
  color: #c0c4cc;
}

/* .infinite-list-wrapper >>> .dt-empty {
  margin-top: 198px;
} */
.dt-list-item {
  display: flex;
  flex-direction: row;
  padding-top: 10px;
  padding-right: 10px;
  cursor: pointer;
}
.dt-list-item-bgc {
  background: linear-gradient(205deg, #f2efff 19.76%, #ffffff 61.75%);
}
.dt-record-list-headimg {
  display: inline-block;
  vertical-align: middle;
  width: 26px;
  height: 26px;
  margin-right: 6px;
}

.dt-record-list-headimg .el-image .image-slot {
  text-align: center;
  display: flex;
  flex-direction: column;
  justify-content: center;
  height: 100%;
}
.dt-record-list-headimg .el-image {
  width: 26px;
  height: 26px;
  border-radius: 50%;
}

.dt-record-list-headimg .el-image >>> img {
  width: auto;
  height: auto;
}

.dt-record-list-headimg .el-image .image-slot {
  text-align: center;
  display: flex;
  flex-direction: column;
  justify-content: center;
  height: 100%;
}

/* .dt-record-list-headimg,
.dt-record-list-headimg .el-image {
  width: 26px;
  height: 26px;
  border-radius: 100%;
}
.dt-record-list-headimg {
  margin-right: 6px;
} */
.dt-record-list-content {
  margin-top: 2px;
  width: 100%;
}
.dt-user-name {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  /* align-items: center; */
}
.dt-user-name em {
  color: #1f1f1f;
  /* font-weight: bold; */
}
.dt-user-name span {
  font-size: 12px;
  color: #909399;
}
.dt-record-list-content .dt-words-box {
  margin: 4px 0px 6px;
  color: #1f1f1f;
  line-height: 18px;
}
.dt-record-list-content .dt-reply-info {
  padding: 6px 10px 4px;
  background-color: #e6ebf4;
}
.dt-record-list-content .el-icon-document {
  margin-right: 4px;
}
.dt-reply-info p {
  margin-bottom: 4px;
  font-size: 14px;
  color: #333333;
}
.dt-reply-info .dt-time {
  font-size: 12px;
  color: #909399;
}

.dt-history-list-imgat,
.dt-history-list-imgsl {
  position: absolute;
  left: 12px;
  bottom: 0;
  width: 14px;
  height: 14px;
}
.dt-history-list-imgat {
  background: url(/skb/img/tab-at.png) no-repeat center;
}
.dt-history-list-imgsl {
  background: url(/skb/img/tab-sl.png) no-repeat center;
}
.dt-chat-content-words-bold {
  font-weight: bold;
}
.dt-chat-content-words-at {
  color: #fa884e;
}
.dt-user-name .dt-chat-content-words-sl,
.dt-chat-content-words-sl {
  color: #9254de;
  margin-right: 6px;
}
.dt-chat-content-words-black {
  color: #1f1f1f !important;
}
.dt-chat-content-reply-info-words {
  line-height: 18px;
}
.dt-chat-content-reply-info-review {
  float: right;
  margin-top: -20px;
  margin-right: 10px;
}
.dt-report-tip {
  margin-left: 10px;
  font-size: 12px;
  color: #909399;
}
.dt-report-tip .el-icon-warning-outline {
  margin-right: 2px;
}
.dt-chat-content-reply-info-review a {
  color: #597ef7;
  font-size: 12px;
}
.dt-receipt-all {
  display: inline-block;
  height: 34px;
  line-height: 34px;
  padding: 0 20px;
  cursor: pointer;
}
.dt-receipt-all:hover {
  color: #2f54eb;
}

.divide-line {
  width: 100%;
  height: 1px;
  background-color: #e9eef7;
  margin: 10px 0 0;
}

.dt-chat-content-words-box {
  position: relative;
  background-color: #fff;
  border-radius: 8px;
  display: inline-block;
  /* padding: 6px 12px; */
  font-size: 14px;
  color: #1f1f1f;
  word-break: break-word;
  border-top-left-radius: 0;
}

.file-box {
  padding: 0 !important;
}

.dt-chat-content-words-box .el-image {
  width: 100px;
  height: 100px;
  cursor: pointer;
  vertical-align: top;
  margin: 2px;
}
.dt-chat-content-words-box .el-image >>> img {
  width: auto;
  height: auto;
}

.dt-chat-content-words-box .el-image .image-slot {
  text-align: center;
  display: flex;
  flex-direction: column;
  justify-content: center;
  height: 100%;
}
.dt-chat-content-words-box .dt-chat-1imgs .el-image {
  width: auto;
  height: auto;
}
.dt-chat-content-words-box .dt-chat-1imgs .el-image >>> img {
  max-width: 650px;
}
.dt-chat-content-words-box em,
.dt-chat-content-words-box a {
  line-height: 1.7;
  cursor: pointer;
}
.dt-chat-content-words-box .align-top {
  vertical-align: top;
}
.dt-chat-content-words-box .dt-mess-file {
  font-size: 14px;
  color: #597ef7;
}
.dt-chat-content-words-box em >>> .dt-chat-content-target-link {
  color: #597ef7;
}
.dt-chat-content-words-box em >>> .dt-chat-content-target-link:hover {
  text-decoration: underline;
}
.dt-chat-content-words-box > a {
  color: #597ef7;
  font-size: 12px;
  margin-left: 5px;
}
.dt-chat-content-words-box > i {
  color: #597ef7;
}
/*聊天记录的消息展示 */
/* 单张图片时候的样式 */
.dt-chat-content-words-box .dt-chat-1imgs .el-image {
  width: auto;
  height: auto;
}
.dt-chat-content-words-box .dt-chat-1imgs .el-image >>> img {
  max-width: 650px;
}
/* 单张图片时候的样式 */
/* 多张图片时候的样式 */
.dt-chat-9imgs {
  max-width: 312px;
}
/* 多张图片时候的样式 */
/* 消息内容是文件的时候样式 */
.dt-chat-content-words-box .dt-mess-file {
  font-size: 14px;
  color: #597ef7;
}
/* 消息内容是文件的时候样式 */
/* 回执消息类型的卡片样式 */
.dt-chat-content-words-card {
  width: 280px;
}

/* 单一回执文件的时候卡片的样式 */
.dt-chat-content-words-receipt-card {
  width: 316px;
  box-sizing: border-box;
  padding: 12px 12px;
  background-color: #fff;
  /* border-radius: 8px; */
  border: 1px solid #e9eef7;
  display: flex;
  cursor: pointer;
}
.dt-chat-content-words-receipt-card img {
  width: 40px;
  height: 40px;
  margin-right: 8px;
}
.dt-chat-content-words-receipt-card p {
  font-size: 14px;
  color: #1f1f1f;
  line-height: 1.5;
}
.dt-chat-content-words-receipt-card p:nth-of-type(2) {
  font-size: 12px;
}
.mb4 {
  margin-bottom: 2px;
}
p.colorb-3 {
  color: #909399;
}

/* 回执消息类型的卡片样式 */
.dt-chat-content-words-card {
  width: 280px;
}
.box-card {
  padding: 16px 14px 12px 14px;
}
.box-card >>> .el-card__body {
  padding: 0;
}
.dt-chat-content-words-card-title {
  font-size: 14px;
  color: #1f1f1f;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  font-weight: bold;
  line-height: 1.5;
}
.dt-chat-content-words-card-dec {
  font-size: 12px;
  color: #606266;
  margin-top: 10px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  line-height: 1.5;
}
.dt-chat-content-words-card-dec.mt8 {
  margin-top: 8px;
}
.dt-chat-content-words-card-dec.mb12 {
  margin-bottom: 12px;
}

.dt-chat-content-words-card-receipt.dt-chat-content-words-card-btn.mt12 {
  margin-top: 12px;
}
.dt-chat-content-words-card-receipt {
  font-size: 12px;
  color: #2f54eb;
}
.dt-chat-content-words-card-receipt >>> .is-disabled {
  background-color: #adc6ff;
  border-color: #adc6ff;
}
.dt-chat-content-words-card-line {
  height: 1px;
  background-color: #e9eef7;
}
.dt-chat-content-words-card-btn {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 12px;
}
.dt-chat-content-words-card {
  cursor: pointer;
}
/* 回执消息类型的卡片样式 */

.file-panel {
  width: 100%;
  padding-right: 10px;
  box-sizing: border-box;
  margin-top: -6px;
}
.file-panel .file-panel-box {
  display: flex;
}

.file-panel .file-panel-box img {
  width: 40px;
  height: 40px;
  flex-shrink: 0;
  margin-right: 11px;
}
.file-panel .file-panel-box .info {
  flex: 1;
}
.file-panel .file-panel-box .name {
  line-height: 19px;
  font-family: Microsoft YaHei;
  color: #1f1f1f;
  font-size: 14px;
}
.file-panel .file-panel-box .sub {
  line-height: 16px;
  font-family: Microsoft YaHei;
  color: #909399;
  font-size: 12px;
  margin-top: 4px;
}
.file-panel .file-panel-box .right {
  margin-left: auto;
  line-height: 16px;
  font-family: Microsoft YaHei;
  color: #909399;
  font-size: 12px;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  justify-content: space-between;
}

.user-list {
  position: absolute;
  left: 165px;
  top: 127px;
  z-index: 10;
  width: 340px;
  height: 630px;
  background: #ffffff;
  box-shadow: 0px 2px 12px rgba(0, 0, 0, 0.1);
  box-sizing: border-box;
  padding: 20px;
}

.user-list-title {
  line-height: 24px;
  font-family: Microsoft YaHei;
  color: #1f1f1f;
  font-size: 18px;
}
.user-list-search {
  margin: 8px 0;
}
.user-list-searchList {
  height: 482px;
  overflow-y: auto;
}
.no-data {
  display: flex;
  align-items: center;
  justify-content: center;
}
.user-list-searchItem {
  padding: 8px 0;
  display: flex;
  align-items: center;
}
.user-list-searchItem .el-image .image-slot {
  text-align: center;
  display: flex;
  flex-direction: column;
  justify-content: center;
  height: 100%;
}
.user-list-searchItem .el-image {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  margin: 0 8px 0 12px;
}
.user-list-username {
  line-height: 19px;
  font-family: Microsoft YaHei;
  color: #171843;
  font-size: 14px;
  display: flex;
}
.user-list-username span:nth-child(1) {
  width: 60px;
}
.user-list-username span:nth-child(2) {
  width: 90px;
}
.user-list-footer {
  box-sizing: border-box;
  box-shadow: 0px 1px 0px #e9eef7 inset;
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  display: flex;
  justify-content: flex-end;
  align-items: center;
  padding: 12px 20px;
}

/* 语音消息样式 */
.dt-chat-content-words-box.dt-chat-content-words-box-voice {
  padding: 0;
  border: 1px solid #e1e6f0;
  margin-top: 4px;
}
.voice-message {
  display: inline-block;
  position: relative;
  padding: 0 10px;
  /* background-color: #f2f2f2; */
  border-radius: 5px;
  max-width: 260px;
  min-width: 66px;
  height: 32px;
  line-height: 32px;
  text-align: left;
}

.voice-message .text {
  font-size: 14px;
}
.voice-message .icon {
  display: inline-block;
  width: 20px;
  height: 20px;
  background-image: url('/skb/img/voice-1.svg'); /* 微信语音消息的麦克风图标 */
  background-size: cover;
  vertical-align: middle;
  transition: background-image 0.4s ease-in-out; /* 动画效果 */
}
.voice-message .icon.animation {
  animation: wave-animation 1.2s infinite linear;
}
.voice-message .icon.paused {
  animation-play-state: paused;
}

.voice-message .audio-length {
  display: inline-block;
  margin-left: 5px;
  /* vertical-align: middle; */
}
.voice-text {
  max-width: 280px;
  padding: 0 10px;
  /* border-top: 1px solid #e9eef7; */
}
.voice-text p {
  padding: 8px 0px;
  border-top: 1px solid #e9eef7;
}
.select-user {
  position: absolute;
  left: 150px;
  top: 48px;
  width: 360px;
  height: 36px;
  z-index: 100;
  overflow: hidden;
  display: flex;
  flex-wrap: nowrap;
  gap: 4px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.select-user .el-tag {
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
  flex-shrink: 0;
}
</style>
